<style>
    #itemFile-update {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="itemFile-update">
    <form class="layui-form" action="" lay-filter="itemFile-update-form">
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">课题名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"
                               readonly
                               th:value="${declareTopic.name}"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label website-form-item-require">结项证书：</label>

                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" id="uploadItemFile"
                                style="margin-top: 6px;">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                        <span id="filename"><a th:href="@{'download/' + ${itemFile.fileId}}"
                                               th:text="${itemFile.name}"></a></span>
                        <input type="hidden" id="fileId" name="fileId" th:value="${itemFile.fileId}">
                        <button type="button" class="layui-btn layui-btn-sm" id="delfile" lay-submit=""
                                lay-filter="delFile"
                                style="margin-top: 6px;">删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="item-upload-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'validate', 'dict', 'upload'], function () {
        var $ = layui.$,
            website = layui.website,
            form = layui.form,
            validate = layui.validate,
            declareTopic = [[${declareTopic}]],
            planId = [[${planId}]],
            upload = layui.upload;

        form.verify(validate);
        form.render();

        //执行实例
        upload.render({
            elem: '#uploadItemFile' //绑定元素
            , url: '/upload' //上传接口
            , size: 100 * 1024
            , accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            , exts: false //指定后缀名 更多参数请到这里https://www.layui.com/doc/modules/upload.html
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res) {
                //上传后的文件名回显到input框
                $("#filename").html("<a href='" + ctx + "download/" + res.data.fileId + "'>" + res.data.name + "</a>");
                $("#fileId").val(res.data.fileId);
                layer.closeAll('loading'); //关闭loading
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        form.on('submit(item-upload-submit)', function (data) {
            let fileId = data.field.fileId;
            if (!fileId) {
                website.alert.info('您还未上传文件！');
                return false;
            }
            website.post(ctx + "biz/item/uploadItemFile/" + declareTopic.declareId + "/" + planId + "/" + fileId, null, function () {
                layer.closeAll();
                website.alert.success('上传结项通知书成功');
                $('#website-item').find('#query').click();
                $('#website-entrust-item').find('#query').click();
            });
            return false;
        });

        form.on('submit(delFile)', function (data) {
            var fileId = $("#fileId").val();
            if (!fileId) {
                website.alert.info('您还未上传文件！');
            } else {
                website.modal.confirm('删除', '确实要删除吗？', function () {
                    $("#filename").text("");
                    $("#fileId").val("");
                });
            }
        })

    });


</script>